/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: soubao-java 2020-07-22 $
 */<template>
  <div>
    <div class="item-title">
      <div class="subject">
        <h3>微信菜单管理</h3>
        <h5>微信菜单</h5>
      </div>
    </div>

    <div
      id="explanation"
      class="explanation"
      style="color: rgb(85, 85, 85); background-color: rgb(243, 244, 244); width: 98%; height: 100%;"
    >
      <div class="bckopa-tips">
        <div class="title">
          <img src="@/static/images/handd.png" alt />
          <h4 title="提示相关设置操作时应注意的要点">操作提示</h4>
        </div>
        <ul>
          <li>自定义菜单最多包括3个一级菜单，每个一级菜单最多包含5个二级菜单</li>
          <li>一级菜单最多4个汉字，二级菜单最多7个汉字，多出来的部分将会以“...”代替</li>
          <li>创建自定义菜单后，菜单的刷新策略是，在用户进入公众号会话页或公众号profile页时，如果发现上一次拉取菜单的请求在5分钟以前，就会拉取一下菜单，如果菜单有更新，就会刷新客户端的菜单。测试时可以尝试取消关注公众账号后再次关注，则可以看到创建后的效果</li>
          <li>如果需要添加小程序菜单，请把路径指定为首页： 复制这个pages/index/index/index</li>
          <li>更改菜单后需要点击保存生效，公众号菜单才能更新</li>
        </ul>
      </div>
      <span title="收起提示" id="explanationZoom" style="display: block;"></span>
    </div>

    <div class="mDiv">
      <div class="ftitle">
        <h3>菜单列表</h3>
      </div>
      <div class="fbutton">
        <div class="add" @click="addFirstMenu()">
          <span>
            <i class="el-icon-circle-plus" /> 添加一级菜单
          </span>
        </div>
      </div>
      <div class="fbutton">
        <div class="add" @click="saveMenu()">
          <span>
            <i class="el-icon-success" /> 保存生效
          </span>
        </div>
      </div>
      <a href @click.prevent="refresh()" class="refresh-date">
        <div title="刷新数据" class="pReload">
          <i class="fa fa-refresh"></i>
        </div>
      </a>
    </div>
    <div class="tablebox" v-if="tableData">
      <el-table
        :data="tableData"
        style="width: 100%;"
        row-key="id"
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      >
        <el-table-column prop="id" label="ID" width="90">
          <template slot-scope="scope">
            <label v-if="scope.row.id > 0">{{scope.row.id}}</label>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="菜单名称" width="180">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.name"
              size="mini"
              @change="update(scope.row)"
              :placeholder="scope.row.err_msg.name"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="菜单类型" width="180">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.type"
              @change="update(scope.row)"
              size="mini"
              v-if="!scope.row.children || scope.row.children.length == 0"
            >
              <el-option
                v-for="item in menuTypes"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="value" label="菜单URL" width="380">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.value"
              size="mini"
              @change="update(scope.row)"
              class="url-input"
              :placeholder="scope.row.err_msg.value"
              v-if="!scope.row.children || scope.row.children.length == 0"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button-group>
              <el-button
                size="mini"
                @click="addChildMenu(scope.row)"
                v-if="scope.row.pid == 0 && scope.row.id > 0"
                icon="el-icon-plus"
              >添加子菜单</el-button>
              <el-button
                size="mini"
                @click="addMenu(scope.row)"
                v-if="scope.row.id < 1"
                icon="el-icon-check"
              >添加</el-button>
              <el-button size="mini" @click="remove(scope.row)" icon="el-icon-delete">删除</el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      menuTypes: [
        {
          label: "链接",
          value: "view"
        },
        {
          label: "触发关键字",
          value: "click"
        },
        {
          label: "扫码",
          value: "scancode_push"
        },
        {
          label: "扫码（等待信息）",
          value: "scancode_waitmsg"
        },
        {
          label: "系统拍照发图",
          value: "pic_sysphoto"
        },
        {
          label: "拍照或者相册发图",
          value: "pic_photo_or_album"
        },
        {
          label: "微信相册发图",
          value: "pic_weixin"
        },
        {
          label: "地理位置",
          value: "location_select"
        },
        {
          label: "小程序",
          value: "miniprogram"
        }
      ],
      id: 0, //添加菜单时的临时id，用于树形table row-key不报错
      form: {
        pid: 0,
        p_name: ""
      },
      loading: false
    };
  },
  created() {
    this.getTree();
  },
  methods: {
    getTree() {
      this.id = 0; //重置临时id
      var that = this;
      this.request.get("/mall/wx_menu/tree").then(res => {
        if (!res.msg) {
          res.forEach(e => {
            if (!e.children) {
              e.children = []; //无子级的菜单初始化子级菜单数组，解决添加子菜单时不显示子菜单的问题
            } else {
              e.children.forEach(e2 => {
                e2.err_msg = {}; //初始化数据校验提示
              });
            }
            e.err_msg = {}; //初始化数据校验提示
          });
          that.tableData = res;
        } else {
          that.$message.error(res.msg);
        }
      });
    },
    refresh() {
      this.getTree();
      this.$message.success("刷新成功！");
    },
    addFirstMenu() {
      if (this.tableData.length < 3) {
        this.tableData.push({
          id: this.id--,
          type: "view",
          pid: 0,
          err_msg: {}
        });
      } else {
        this.$message.error("公众号最多三个一级菜单");
      }
    },
    addChildMenu(row) {
      if (row.children.length < 5) {
        row.children.push({
          id: this.id--,
          type: "view",
          pid: row.id,
          err_msg: {}
        });
      } else {
        this.$message.error("一级菜单下最多五个子菜单");
      }
    },
    addMenu(row) {
      var that = this;
      this.request.post("/mall/wx_menu", row).then(res => {
        if (res.status == 1) {
          that.$message.success("添加成功");
          that.getTree();
        } else {
          that.$message.error("参数错误");
          row.err_msg = res.result;
        }
      });
    },
    saveMenu() {
      var that = this;
      this.request.put("/mall/wx_menu/push").then(res => {
        if (res.status == 1) {
          that.$message.success("菜单已成功生成");
        } else {
          that.$message.error(res.msg);
        }
      });
    },
    update(row) {
      if (row.id > 0) {
        var that = this;
        this.request.put("/mall/wx_menu", row).then(res => {
          if (res.status == 1) {
            that.$message.success("更新成功，保存后生效");
          } else {
            that.$message.error(res.msg);
            that.getTree();
          }
        });
      }
    },
    remove(row) {
      //尚未保存的菜单，直接删除
      if (row.id < 1) {
        //一级菜单
        if (row.pid == 0) {
          this.tableData.forEach((e, i) => {
            if (e.id == row.id) {
              this.tableData.splice(i, 1);
            }
          });
        } else {
          //子级菜单
          this.tableData.forEach(e => {
            //找到父级
            if (e.id == row.pid) {
              e.children.forEach((e2, i) => {
                if (e2.id == row.id) {
                  e.children.splice(i, 1);
                  return false;
                }
              });
            }
          });
        }
        return;
      }
      var that = this;
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          that.request.delete("/mall/wx_menu?id=" + row.id).then(res => {
            if (res.status == 1) {
              that.$message.success("删除成功!");
              that.getTree();
            } else {
              that.$message.error(res.msg);
            }
          });
        })
        .catch(() => {
          that.$message.info("已取消删除");
        });
    },
    onSubmit() {
      // this.loading = true;
      var that = this;
      if (this.form.id) {
        //编辑
        this.request.put(that.form).then(function(res) {
          if (res.status == 1) {
            that.dialogFormVisible = false;
            that.$message.success("更新成功");
            that.getTree();
          } else if (res.status == -1) {
            that.$message.error("参数错误");
            that.errResult = res.result;
          } else {
            that.$message.error(res.msg);
          }
          that.loading = false;
        });
      } else {
        //添加
        this.form.store_id = JSON.parse(getSeller()).store_id;
        addStoreGoodsClass(that.form).then(function(res) {
          if (res.status == 1) {
            that.dialogFormVisible = false;
            that.$message.success("添加成功");
            that.getList();
            if (that.form.parent_id == 0) {
              that.getTopList(); // 添加了顶级分类，更新顶级分类下拉框数据
            }
          } else if (res.status == -1) {
            that.$message.error("参数错误");
            that.errResult = res.result;
          } else {
            that.$message.error(res.msg);
          }
          that.loading = false;
        });
      }
    }
  }
};
</script>

<style scoped>
>>> .url-input .el-input__inner {
  width: 350px;
}
>>> input::-webkit-input-placeholder {
  color: #b72124;
  font-size: 12px;
}
>>> input::-moz-input-placeholder {
  color: #b72124;
  font-size: 12px;
}
>>> input::-ms-input-placeholder {
  color: #b72124;
  font-size: 12px;
}
</style>
